<template>
  <div class="app-container" v-loading="loading" element-loading-text="loading">
    <div style="width:100%">
        日 期：<el-date-picker
            v-model="date"
            type="date"
            placeholder="选择排班日期"
            style="margin-right:1%">
        </el-date-picker>

        <el-button type="success" style="margin-right:1%" @click="getSomedaySchedule()">显示该日排班表</el-button>
        <el-button type="primary" style="margin-right:2%" @click="tableToExcel()">导出Excel排班表</el-button>

        <el-time-select
            placeholder="上班时间"
            v-model="beginTime"
            :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '09:30'
            }">
        </el-time-select>

        <el-time-select
            style="margin-right:2%"
            placeholder="下班时间"
            v-model="endTime"
            :picker-options="{
            start: '17:30',
            step: '00:15',
            end: '18:30',
            minTime: beginTime
            }">
        </el-time-select>

        部 门：<el-select v-model="departmentValue" placeholder="选择部门"  >
            <el-option
                v-for="item in department"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" style="margin-left:3%" @click="addSche()">提交排班</el-button>
    </div>
    
    <el-row>
        <el-col :span="12">
    <!-- 财务部 3个岗位 -->
    <transition name="el-fade-in">
        <div v-if="this.departmentValue=='caiwu'">
            <div class="box">
                <span class="text">{{caiwuValue[0].workContent}}</span><br>
                <el-select v-model="caiwuValue[0].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in caiwu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="caiwuValue[0].staffNumber!=''">工号：{{this.caiwuValue[0].staffNumber}}</span><br>
                
                <el-select v-model="caiwuValue[1].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in caiwu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="caiwuValue[1].staffNumber!=''">工号：{{this.caiwuValue[1].staffNumber}}</span>
                
            </div>
            
            <div class="box">
                <span class="text">{{caiwuValue[2].workContent}}</span><br>
                <el-select v-model="caiwuValue[2].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in caiwu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="caiwuValue[2].staffNumber!=''">工号：{{this.caiwuValue[2].staffNumber}}</span>
            </div>
        </div>
    </transition>

    <!-- 维护部 2个岗位 -->
    <transition name="el-fade-in">
        <div v-if="this.departmentValue=='weihu'">
            <div class="box">
                <span class="text">{{weihuValue[0].workContent}}</span><br>
                <el-select v-model="weihuValue[0].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in weihu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="weihuValue[0].staffNumber!=''">{{this.weihuValue[0].staffNumber}}</span><br>
                
            </div>
            
            <div class="box">
                <span class="text">{{weihuValue[1].workContent}}</span><br>
                <el-select v-model="weihuValue[1].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in weihu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="weihuValue[1].staffNumber!=''">{{this.weihuValue[1].staffNumber}}</span>
            </div>
        </div>
    </transition>

    <!-- 人事部 2个岗位 -->
    <transition name="el-fade-in">
        <div v-if="this.departmentValue=='renshi'">
            <div class="box">
                <span class="text">{{renshiValue[0].workContent}}</span><br>
                <el-select v-model="renshiValue[0].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in renshi"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="renshiValue[0].staffNumber!=''">{{this.renshiValue[0].staffNumber}}</span><br>
            </div>

            <div class="box">
                <span class="text">{{renshiValue[1].workContent}}</span><br>
                <el-select v-model="renshiValue[1].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in renshi"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="renshiValue[1].staffNumber!=''">{{this.renshiValue[1].staffNumber}}</span>
            </div>
        </div>
    </transition>

    <!-- 业务部 4个岗位 -->
    <transition name="el-fade-in">
        <div v-if="this.departmentValue=='yewu'">
            <div class="box">
                <span class="text">{{yewuValue[0].workContent}}</span><br>
                <el-select v-model="yewuValue[0].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in yewu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="yewuValue[0].staffNumber!=''">{{this.yewuValue[0].staffNumber}}</span><br>
                
                <el-select v-model="yewuValue[1].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in yewu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="yewuValue[1].staffNumber!=''">{{this.yewuValue[1].staffNumber}}</span>
                
            </div>
            
            <div class="box">
                <span class="text">{{yewuValue[2].workContent}}</span><br>
                <el-select v-model="yewuValue[2].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in yewu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="yewuValue[2].staffNumber!=''">{{this.yewuValue[2].staffNumber}}</span><br>

                <el-select v-model="yewuValue[3].staffNumber" placeholder="选择人员" class="selectBox">
                    <el-option
                    v-for="item in yewu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="staff" v-if="yewuValue[3].staffNumber!=''">{{this.yewuValue[3].staffNumber}}</span>
            </div>
        </div>
    </transition>
    </el-col>


<el-col :span="12">
    <transition name="el-fade-in">
    <el-table
      v-loading="listLoading"
      v-if="showList==true"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top:1%"
    >
      <el-table-column align="center" label="工号" width="110">
        <template slot-scope="scope">
          {{ scope.row.staffNumber }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      
      <el-table-column label="工作内容" align="center">
        <template slot-scope="scope ">
          {{ scope.row.workContent }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="上班时间" width="160">
        <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ formatTime(scope.row.beginTime,"YYYY-MM-DD HH:mm") }}
            </span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="下班时间" width="160">
        <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ formatTime(scope.row.endTime,"YYYY-MM-DD HH:mm") }}
            </span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" width="100">
        <template slot-scope="scope">
            <el-popover placement="bottom" width="230" style="margin-right:5px" v-model="scope.row.delVisible">
                <p>确定删除该排班记录吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="scope.row.delVisible = false">取消</el-button>
                    <el-button type="danger" size="mini" @click='scope.row.delVisible = false;deleteSche(scope.row.staffNumber,new Date(scope.row.beginTime))'>确定</el-button>
                </div>
                <el-button type="danger" slot="reference">删除</el-button>
             </el-popover>
        </template>
      </el-table-column>

    </el-table>
    </transition>
    </el-col>
    </el-row>

  </div>
</template>

<script>
import { selectAllDepartment } from '@/api/table'
import { getList } from '@/api/table'
import { addSchedule } from '@/api/table'
import { searchSomedaySchedule } from '@/api/table'
import { deleteSchedule } from '@/api/table'

export default {
  data() {
    return {
      date:'',
      beginTime:'',
      endTime:'',
      loading:true,
      department: [{
          value: 'caiwu',
          label: '财务部'
        }, {
          value: 'weihu',
          label: '维护部'
        }, {
          value: 'renshi',
          label: '人事部'
        }, {
          value: 'yewu',
          label: '业务部'
        }],

        caiwu: [],
        weihu:[],
        renshi: [],
        yewu:[],

        departmentValue: '',

        caiwuValue:[{
            staffNumber:'',
            workContent:'采购',
        },{
            staffNumber:'',
            workContent:'采购',
        },{
            staffNumber:'',
            workContent:'税务',
        },],
        weihuValue:[{
            staffNumber:'',
            workContent:'资料整理',
        },{
            staffNumber:'',
            workContent:'设备维护',
        },],
        renshiValue:[{
            staffNumber:'',
            workContent:'前台接待',
        },{
            staffNumber:'',
            workContent:'人事管理',
        },],
        yewuValue:[{
            staffNumber:'',
            workContent:'业务开发',
        },{
            staffNumber:'',
            workContent:'业务开发',
        },{
            staffNumber:'',
            workContent:'业务运营',
        },{
            staffNumber:'',
            workContent:'业务运营',
        },],

        listLoading:false,
        showList:false,
        list:[],

    }
  },
  created(){
      this.fetchData();
  },
  methods:{
      tableToExcel(){
          if(this.list==null || this.list=='' || this.list.length==0){
              this.$message.error("导出失败，请选择已经排班的日期，显示后再导出excel表！")
              return 
          }
          else if(this.list!=null && this.list!=''){
              // 要导出的json数据
              var jsonData=[]
              for(let i=0;i<this.list.length;i++){
                  const data = {
                      staffNumber:this.list[i].staffNumber,
                      name:this.list[i].name,
                      workContent:this.list[i].workContent,
                      beginTime:this.list[i].beginTime,
                      endTime:this.list[i].endTime
                  }
                  jsonData.push(data)
              }
                // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
                let str = `工号,姓名,工作内容,上班时间,下班时间\n`;
                // 增加\t为了不让表格显示科学计数法或者其他格式
                for (let i = 0; i < jsonData.length; i++) {
                    for (const key in jsonData[i]) {
                        str += `${jsonData[i][key] + '\t'},`;
                    }
                    str += '\n';
                }
                // encodeURIComponent解决中文乱码
                const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
                // 通过创建a标签实现
                const link = document.createElement("a");
                link.href = uri;
                // 对下载的文件命名
                link.download = this.formatTime(this.date,"YYYY年MM月DD日")+"排班表.csv";
                link.click();
            }
        },
      deleteSche(staffNumber,workTime){
          this.listLoading=true
          deleteSchedule({staffNumber:staffNumber,workTime:workTime})
          .then(res=>{
              this.$message.success(res.data.data)
          })
          .then(()=>{
              this.getSomedaySchedule()
          })
          .then(()=>{
              if(this.showList==false){
                  this.getSomedaySchedule()
              }
          })
          .catch(err=>{
              this.$message.error("抱歉，服务器宕机了...")
          })
      },
      formatTime(time, format='') {
            return this.$moment(time).utcOffset(8).format(format)
        },
      getSomedaySchedule(){
          this.showList=!this.showList
          if(this.showList==false){
              return
          }

          this.listLoading=true
          if(this.date==null || this.date==''){
              this.listLoading=false
              return 
          }
          searchSomedaySchedule({searchTime:this.date})
          .then(res=>{
             this.list=[]
              var data=res.data.data
              for(let i=0;i<data.length;i++){
                  var l={
                      staffNumber:data[i].staffNumber,
                      name:data[i].name,
                      workContent:data[i].workContent,
                      beginTime:data[i].beginTime,
                      endTime:data[i].endTime,

                      delVisible:false,
                  }
                  this.list.push(l);
              }
          })
          .then(()=>{
              this.listLoading=false
          })
          .catch(err=>{
            this.listLoading=false
          })
      },
      addSche(){
          if(this.date==null || this.date==''){
              this.$message.error("请选择排班日期！")
              return
          }
          if(this.beginTime==null || this.beginTime==''){
              this.$message.error("请选择上班时间！")
              return 
          }
          if(this.endTime==null || this.endTime==''){
              this.$message.error("请选择下班时间！")
              return 
          }
          if(this.beginTime==null || this.beginTime==''){
              this.$message.error("请选择上班时间！")
              return 
          }
          var BTime=this.date.setHours(this.beginTime.substring(0,2))
          BTime=new Date(new Date(BTime).setMinutes(this.beginTime.substring(3,5)))

          var ETime=this.date.setHours(this.endTime.substring(0,2))
          ETime=new Date(new Date(ETime).setMinutes(this.endTime.substring(3,5)))

          var staffNumbers=[]
          var workContents=[]
          for(let i=0;i<this.caiwuValue.length;i++){
              if(this.caiwuValue[i].staffNumber!=''){
                  staffNumbers.push(this.caiwuValue[i].staffNumber)
                  workContents.push(this.caiwuValue[i].workContent)
              }
          }
          for(let i=0;i<this.weihuValue.length;i++){
              if(this.weihuValue[i].staffNumber!=''){
                  staffNumbers.push(this.weihuValue[i].staffNumber)
                  workContents.push(this.weihuValue[i].workContent)
              }
          }
          for(let i=0;i<this.renshiValue.length;i++){
              if(this.renshiValue[i].staffNumber!=''){
                  staffNumbers.push(this.renshiValue[i].staffNumber)
                  workContents.push(this.renshiValue[i].workContent)
              }
          }
          for(let i=0;i<this.yewuValue.length;i++){
              if(this.yewuValue[i].staffNumber!=''){
                staffNumbers.push(this.yewuValue[i].staffNumber)
                workContents.push(this.yewuValue[i].workContent)
              }  
          }
          addSchedule({beginTime:BTime,endTime:ETime,staffNumbers:staffNumbers,workContents:workContents})
          .then(res=>{
              this.$message.success(res.data.data)
                
          })
          .then(()=>{
              this.getSomedaySchedule()
          })
          .then(()=>{
              if(this.showList==false){
                  this.getSomedaySchedule()
              }
          })
          .catch(err=>{
            this.$message.error("抱歉，服务器宕机了...")
          })
      },
      fetchData(){
          this.loading=true
          getList()
          .then(res=>{
              var data=res.data.data
              for(let i=0;i<data.length;i++){
                if(data[i].department=='财务部'){
                    this.caiwu.push({
                        value:data[i].staffNumber,
                        label:data[i].name,
                        })
                }
                else if(data[i].department=='维护部'){
                    this.weihu.push({
                        value:data[i].staffNumber,
                        label:data[i].name,
                        })
                }
                else if(data[i].department=='人事部'){
                    this.renshi.push({
                        value:data[i].staffNumber,
                        label:data[i].name,
                        })
                }
                else if(data[i].department=='业务部'){
                    this.yewu.push({
                        value:data[i].staffNumber,
                        label:data[i].name,
                        })
                }
              }
          })
          .catch(err=>{
              console.log('err :>> ', err);
          })
          this.loading=false
      }
  }
}
</script>

<style lang="scss" scoped>
.staff{
    font-size: 18px;
    margin-left: 5%;
}
.selectBox{
    margin-left:2%;
    margin-bottom:20px;
}
.text{
    font-size: 28px;
    color:gray;
    font-weight: 700;
    margin-left: 5%;
}
.box{
    line-height:50px;
    margin-top:2%;
    width: 60%;
    height: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .10);
}
</style>
